<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<html>
<head>
<meta name="decorator" content="front" />
<title>首页</title>
<link href="${ctxStatic }/cityselector/cityselect.css" rel='stylesheet'type='text/css' />
<style type="text/css">
.WdateDiv .dpButton{
	background-color: #88BF10;
}
.Wdate{
	height: 28px;
	border:1px solid #dddddd;
}
</style>
<script type="text/javascript" src="${ctxStatic }/cityselector/cityselect.js"></script>
<script>

$(function(){
	//鼠标移入样式
	$(".sr_accordion>ul>li").mouseover(function () {
	 $(this).addClass("active");
	 $(this).siblings().removeClass("active");
	});
	// 初始化站点选择框
	//旅游包车出发地
	$.post('${ctxFront}/info/site/siteJson',{spottypes:'0,b'}, function(data) {
		var allCity = data;
		new Vcity.CitySelector({input:'boardaddrName',cityData:allCity});
		new Vcity.CitySelector({input:'departcity_sitename2',cityData:allCity});
	});
	//旅游包车目的地
	$.post('${ctxFront}/info/site/siteJson',{spottypes:'0,2,b'}, function(data) {
		var allCity = data;
		new Vcity.CitySelector({input:'offaddrName',cityData:allCity});
		new Vcity.CitySelector({input:'destcity_sitename2',cityData:allCity});
	});
	//按天包车出发目的地
	$.post('${ctxFront}/info/site/siteJson',{spottypes:'0,b'}, function(data) {
		var allCity = data;
		new Vcity.CitySelector({input:'departcity_sitename1',cityData:allCity});
		new Vcity.CitySelector({input:'destcity_sitename1',cityData:allCity});
	});
	// 接送客点
	$.post('${ctxFront}/info/site/siteJson',{spottypes:'a'}, function(data) {
		new Vcity.CitySelector({input:'destcity_sitename3',cityData:data});
		new Vcity.CitySelector({input:'destcity_sitename4',cityData:data});
	});
	// 机场
	$.post('${ctxFront}/info/site/siteJson',{spottypes:'9'}, function(data) {
		new Vcity.CitySelector({input:'departcity_sitename3',cityData:data});
	});
	// 火车站
	$.post('${ctxFront}/info/site/siteJson',{spottypes:'8'}, function(data) {
		new Vcity.CitySelector({input:'departcity_sitename4',cityData:data});
	});
	//日包车提交
	$('#daysearch').click(function(){
		var val=$('#dayRentType').val();
		var destcity=$('#destcity_sitename1').val();
		if(val=='跨市' && destcity=='') {
			alert("目的地不能为空");
		} else {
			$('#dayRentForm').submit();
		}
	});
	//旅游包车提交
	$("#travelSearch").click(function(){
		var destcity=$("#destcity_sitename2").val();
		if(destcity=="") {
			alert("目的地不能为空");
		} else {
			$('#travelRentForm').submit();
		}
	});
	//景区直通车提交
	$("#realscheSearch").click(function(){
		var v=$("#realsche_destcity_code_div").children("input").val();
		if(v=="")
		{
			alert("目的地不能为空");
		}else
		{
			$('#realscheForm').submit();
		}
	});
	//接送机提交
	$("#airportsearch").click(function(){
		if($('#departcity_sitename3').val()=="") {
			alert("机场不能为空");
		}else {
			$('#airportRentForm').submit();
		}
	});
	//接送火车提交
	$("#trainRentsearch").click(function(){
		if($('#departcity_sitename4').val()=="") {
			alert("火车站不能为空");
		} else {
			$('#trainRentForm').submit();
		}
	});
	// 日租包车包车类型处理
	$('.dayRentTab').click(function(){
		$('.dayRentTab').removeClass('flex_con_top_action');
		$(this).addClass('flex_con_top_action');
		$('#dayRentType').val($(this).attr('data-value'));
		changeRentType($(this).attr('data-value'));
	});
	$('#dayRentType').change(function(){
		changeRentType($(this).val());
	});
	
	$('.airportRentTab').click(function(){
		$('.airportRentTab').removeClass('flex_con_top_action');
		$(this).addClass('flex_con_top_action');
		$('#airportRentType').val($(this).attr('data-value'));
		changeShowSpan($(this).attr('data-value'),'airport');
	});
	
	$('.trainRentTab').click(function(){
		$('.trainRentTab').removeClass('flex_con_top_action');
		$(this).addClass('flex_con_top_action');
		$('#trainRentType').val($(this).attr('data-value'));
		changeShowSpan($(this).attr('data-value'),'train');
	});
	
});
function changeRentType(val){
	if(val=='市内') {
		$('#destcity_sitename1').val("");
		$('#destcity.siteid1').val("");
		$('#day_destcity_code_div').hide();
	}
	if(val=='跨市') {
		$('#day_destcity_code_div').show();
	}
}

function changeShowSpan(val,type){
	if(type=='airport'){
		if(val=='接机') {
			var span = $('.airportDestcitySpan');
			$(span[0]).text('机场');
			$(span[1]).text('抵达地点');
		} 
		if(val=='送机') {
			var span = $('.airportDestcitySpan');
			$(span[0]).text('机场');
			$(span[1]).text('出发地点');
		}
	}
	if(type=='train'){
		if(val=='接火车') {
			var span = $('.trainDestcitySpan');
			$(span[0]).text('火车站');
			$(span[1]).text('抵达地点');
		} 
		if(val=='送火车') {
			var span = $('.trainDestcitySpan');
			$(span[0]).text('火车站');
			$(span[1]).text('出发地点');
		}
	}
}


</script>
</head>
<body>
	<input type="hidden" id="menuInfo" value="index">
	<!-- 轮播广告 -->
	<div id="banner_tabs" class="flexslider flexslider_height">
		<ul class="slides">
			<c:forEach items="${sysAdsList }" var="sysAds">
				<li>
					<a target="_blank" href="${pageContext.request.contextPath}/${sysAds.linkurl }">
						<img alt="" class="flexslider_height" style="background: url(${pageContext.request.contextPath}${sysAds.pageurl }) no-repeat;background-position: center;" />
					</a>
				</li>
			</c:forEach>
		</ul>
		<ul class="flex-direction-nav">
			<li><a class="flex-prev" href="javascript:;">Previous</a></li>
			<li><a class="flex-next" href="javascript:;">Next</a></li>
		</ul>
		<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
			<c:forEach items="${sysAdsList }" var="sysAds" varStatus="vs">
				<li><a>${vs.index+1 }</a></li>
			</c:forEach>
		</ol>
		<div class="index_select">
		<div class="flex_suspension font_larger_size">
			<div class="flex_nav">
				<div id="flex_nav_1" class="flex_nav_div flex_nav_action">按天包车</div>
				<div id="flex_nav_2" class="flex_nav_div ">旅游包车</div>
				<div id="flex_nav_4" class="flex_nav_div ">接送机</div>
				<div id="flex_nav_5" class="flex_nav_div ">接送火车</div>
				<div id="flex_nav_3" class="flex_nav_div">AA拼车</div>
			</div>
			<div id="flex_con_1" class="flex_con font_normal_size">
				<form id="dayRentForm" action="${ctxFront}/rentproduct/list" method="get">
					<input id="dayRentType" type="hidden" name="tabType" value="市内"/>
					<input type="hidden" name="rentType" value="${ORDER_TYPE_RENTPRODUCT_DAY }"/>
					<div class="flex_con_all">
						<div class="flex_con_top flex_con_line">
							<div class="dayRentTab flex_con_top_action" data-value="市内">市内包车</div>
							<div class="dayRentTab" data-value="跨市">跨市包车</div>
						</div>
						<div class="clear"></div>
						<div class="flex_con_line">
							<label class="display_ib">出发地</label>
							<input type="text" id="departcity_sitename1" data-autocity="yes" class="display_ib flex_select1" name="departcity.sitename" value="" placeholder="请输入出发地" autocomplete="off">
							<input type="hidden" name="departcity.siteid" value="">
						</div>
						<div class="flex_con_line hide" id="day_destcity_code_div">
							<label class="display_ib">目的地</label>
							<input type="text" id="destcity_sitename1" class="display_ib flex_select1" name="destcity.sitename" value="" placeholder="请输入目的地" autocomplete="off">
							<input type="hidden" id="destcity.siteid1" name="destcity.siteid" value="">
						</div>
						<div class="flex_con_line">
							<label class="display_ib">包车天数</label>
							<select name="daysnum" class="display_ib flex_select1" style="padding-left: 0">
								<c:forEach items="1,2,3,4,5,6,7,8,9,10" var="day">
									<option value="${day }">${day }天</option>
								</c:forEach>
							</select>
						</div>
						<div class="flex_con_line">
							<label class="display_ib">出发日期</label>
							<input type="text" name="fromdateStr" readonly class="display_ib flex_input_ty1 Wdate" value="${tomorrow }"
								onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,minDate:'${today}'});"/>
							<input type="text" name="time" readonly class="display_ib flex_input_th1 Wdate" value="${time }"
								onclick="WdatePicker({dateFmt:'HH:mm',isShowClear:false});"/>
						</div>
						<div class="flex_con_line">
							<div id="daysearch" class="float_r flex_con_search1 pointer" style="margin-top: 5px;">
								搜索
							</div>
						</div>
					</div>
				</form>
			</div>
			<div id="flex_con_2" class="flex_con hide font_normal_size">
				<form id="travelRentForm" action="${ctxFront}/rentproduct/list" method="get">
					<input type="hidden" name="rentType" value="${ORDER_TYPE_RENTPRODUCT_TRAVEL }"/>
					<div style=" margin-top:20px;">
					</div>
					<div class="flex_con_all">
						<div class="flex_con_line">
							<label class="display_ib">出发地</label>
							<input type="text" id="departcity_sitename2" data-autocity="yes" class="display_ib flex_select1" name="departcity.sitename" value="" placeholder="请输入出发城市" autocomplete="off">
							<input type="hidden" name="departcity.siteid" value="">
						</div>
						<div class="flex_con_line" id="travel_destcity_code_div">
							<label class="display_ib">目的地</label>
							<input type="text" id="destcity_sitename2" class="display_ib flex_select1" name="destcity.sitename" value="" placeholder="请输入目的城市" autocomplete="off">
							<input type="hidden" name="destcity.siteid" value="">
						</div>
						<div class="flex_con_line">
							<label class="display_ib">出发日期</label>
							<input type="text" name="fromdateStr" readonly class="display_ib flex_input_ty1 Wdate" value="${tomorrow }"
								onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,minDate:'${today}'});"/>
							<input type="text" name="time" readonly class="display_ib flex_input_th1 Wdate" value="${time }"
								onclick="WdatePicker({dateFmt:'HH:mm',isShowClear:false});"/>
						</div>
<%-- 						<div class="flex_con_line">
							<label class="display_ib">包车天数</label>
							<select name="daysnum" class="display_ib flex_select1" style="padding-left: 0">
								<c:forEach items="1,2,3,4,5,6,7,8,9,10" var="day">
									<option value="${day }">${day }天</option>
								</c:forEach>
							</select>
						</div> --%>
						<div class="flex_con_line">
							<div id="travelSearch" class="float_r flex_con_search1 pointer" style="margin-top: 0px">
								搜索
							</div>
						</div>
					</div>
				</form>
			</div>
			<div id="flex_con_3" class="flex_con hide font_normal_size">
				<form id="realscheForm" action="${ctxFront}/realsche/list" method="get">
					<div class="flex_con_all">
						<div style="height: 40px"></div>
						<div class="flex_con_line" id="realsche_destcity_code_div">
							<label class="display_ib">出发地</label>
							<input type="text" id="boardaddrName" data-autocity="yes" class="display_ib flex_select1" name="boardaddrName" value="" placeholder="请输入出发地" autocomplete="off">
							<input type="hidden" name="boardaddr" value="">
						</div>
						<div class="flex_con_line">
							<label class="display_ib">目的地</label>
							<input type="text" id="offaddrName" class="display_ib flex_select1" name="offaddrName" value="${shanghaidisini.sitename}" placeholder="请输入目的地" autocomplete="off">
							<input type="hidden" name="offaddr" value="${shanghaidisini.siteid}">
						</div>
						<div class="flex_con_line">
							<label class="display_ib">出发日期</label>
							<input type="text" name="departdateStr" readonly class="display_ib flex_input1 Wdate" value="${tomorrow }"
								onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,minDate:'${today}'});"/>
						</div>
						<div class="flex_con_line">
							<div id="realscheSearch" class="float_r flex_con_search1 pointer">
								搜索
							</div>
						</div>
					</div>
				</form>
			</div>
			<div id="flex_con_4" class="flex_con hide font_normal_size">
				<form id="airportRentForm" action="${ctxFront}/rentproduct/list" method="get">
					<input type="hidden" name="rentType" value="${ORDER_TYPE_RENTPRODUCT_AIRPLANE }"/>
					<input id="airportRentType" type="hidden" name="tabType" value="接机"/>
					<div class="flex_con_all">
						<div class="flex_con_top flex_con_line">
							<div class="airportRentTab flex_con_top_action" data-value="接机">接机</div>
							<div class="airportRentTab" data-value="送机">送机</div>
						</div>
						<div class="clear"></div>
						<div class="flex_con_line" id="airport_destcity_code_div">
							<label class="display_ib airportDestcitySpan">机场</label>
							<input type="text" id="departcity_sitename3" class="display_ib flex_select1" name="departcity.sitename" value="" placeholder="请选择机场" autocomplete="off">
							<input type="hidden" name="departcity.siteid" value="">
						</div>
						<div class="flex_con_line">
							<label class="display_ib">用车时间</label>
							<input type="text" name="fromdateStr" readonly class="display_ib flex_input_ty1 Wdate" value="${tomorrow }"
								onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,minDate:'${today}'});"/>
							<input type="text" name="time" readonly class="display_ib flex_input_th1 Wdate" value="${time }"
								onclick="WdatePicker({dateFmt:'HH:mm',isShowClear:false});"/>
						</div>
						<div class="flex_con_line">
							<label class="display_ib airportDestcitySpan">抵达地点</label>
							<input type="text" id="destcity_sitename3" data-autocity="no" class="display_ib flex_select1" name="destcity.sitename" value="" placeholder="请选择地点" autocomplete="off">
							<input type="hidden" name="destcity.siteid" value="">
						</div>
						<div class="flex_con_line">
							<div id="airportsearch" class="float_r flex_con_search1 pointer">
								搜索
							</div>
						</div>
					</div>
				</form>
			</div>
			<div id="flex_con_5" class="flex_con hide font_normal_size">
				<form id="trainRentForm" action="${ctxFront}/rentproduct/list" method="get">
					<input type="hidden" name="rentType" value="${ORDER_TYPE_RENTPRODUCT_TRAIN }"/>
					<input id="trainRentType" type="hidden" name="tabType" value="接火车"/>
					<div class="flex_con_all">
						<div class="flex_con_top flex_con_line">
							<div class="trainRentTab flex_con_top_action" data-value="接火车">接火车</div>
							<div class="trainRentTab" data-value="送火车">送火车</div>
						</div>
						<div class="clear"></div>
						<div class="flex_con_line" id="trainRent_destcity_code_div">
							<label class="display_ib trainDestcitySpan">火车站</label>
							<input type="text" id="departcity_sitename4" class="display_ib flex_select1" name="departcity.sitename" value="" placeholder="请输入火车站" autocomplete="off">
							<input type="hidden" name="departcity.siteid" value="">
						</div>
						<div class="flex_con_line">
							<label class="display_ib">用车时间</label>
							<input type="text" name="fromdateStr" readonly class="display_ib flex_input_ty1 Wdate" value="${tomorrow }"
								onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,minDate:'${today}'});"/>
							<input type="text" name="time" readonly class="display_ib flex_input_th1 Wdate" value="${time }"
								onclick="WdatePicker({dateFmt:'HH:mm',isShowClear:false});"/>
						</div>
						<div class="flex_con_line">
							<label class="display_ib trainDestcitySpan">抵达地点</label>
							<input type="text" id="destcity_sitename4" data-autocity="no" class="display_ib flex_select1" name="destcity.sitename" value="" placeholder="请输入送达地点" autocomplete="off">
							<input type="hidden" name="destcity.siteid" value="">
						</div>
						<div class="flex_con_line">
							<div id="trainRentsearch" class="float_r flex_con_search1 pointer">
								搜索
							</div>
						</div>
					</div>
				</form>
			</div>
			
		</div>
		</div>
	</div>
	<div id="#content">
	<div class="con_character">
		<div class="con_character_c">
			<div class="con_character_f">
				<div class="con_character_i"><img src="${ctxStatic}/xiake/images/icon/icon_1.png"/></div>
				<div class="con_character_h2 font_larger_size">满意的价格</div>
				<div class="con_character_h3 font_normal_size">自主约车 价格透明</div>
			</div>
			<div class="con_character_f">
				<div class="con_character_i"><img src="${ctxStatic}/xiake/images/icon/icon_2.png"/></div>
				<div class="con_character_h2 font_larger_size">便捷的支付</div>
				<div class="con_character_h3 font_normal_size">多种支付 交易安全</div>
			</div>
			<div class="con_character_f">
				<div class="con_character_i"><img src="${ctxStatic}/xiake/images/icon/icon_3.png"/></div>
				<div class="con_character_h2 font_larger_size">专业的服务</div>
				<div class="con_character_h3 font_normal_size">专业车队 职业司机</div>
			</div>
			<div class="con_character_f">
				<div class="con_character_i"><img src="${ctxStatic}/xiake/images/icon/icon_4.png"/></div>
				<div class="con_character_h2 font_larger_size">安全保障</div>
				<div class="con_character_h3 font_normal_size">正规车辆 保险到位</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<!-- 车型介绍 -->
        <div id="item5" class="sr_w sr_space toitem">
            <div class="title sr_center">
                <h2 class="sr_color_3">多款车型供应，方便</h2>
                <p class="sr_color_9">公司团建、聚会出游多款车型任您选择</p>
            </div>
            <div class="sr_accordion sr_mb_20">
                <ul>
                    <li class="active" >
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img1_e420818.jpg" alt="经济型">
                        <span class="info">经济型</span>
                        <div class="mask"></div>
                    </li>
                    <li >
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img2_3fb470a.jpg" alt="舒适型">
                        <span class="info">舒适型</span>
                        <div class="mask"></div>
                    </li>
                    <li>
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img3_cb2e308.jpg" alt="豪华型">
                        <span class="info">豪华型</span>
                        <div class="mask"></div>
                    </li>
                    <li>
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img4_3b1597d.jpg" alt="普通商务型">
                        <span class="info">普通商务型</span>
                        <div class="mask"></div>
                    </li>
                    <li>
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img5_9d88c49.jpg" alt="优越商务型">
                        <span class="info">优越商务型</span>
                        <div class="mask"></div>
                    </li>
                </ul>
            </div>
          <div class="sr_accordion">
                <ul>
                    <li>
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img6_209eaad.jpg" alt="19座纯电动中巴">
                        <span class="info">19座纯电动中巴</span>
                        <div class="mask"></div>
                    </li>
                    <li>
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img7_e3975ab.jpg" alt="20座中巴">
                        <span class="info">20座中巴</span>
                        <div class="mask"></div>
                    </li>
                    <li>
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img8_ec33a3c.jpg" alt="35座大巴">
                        <span class="info">35座大巴</span>
                        <div class="mask"></div>
                    </li>
                    <li>
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img9_66e5c9e.jpg" alt="45座大巴">
                        <span class="info">45座大巴</span>
                        <div class="mask"></div>
                    </li>
                    <li class="active" >
                        <img src="${ctxStatic}/xiake/images/carmodels/page4_img10_bc13bfc.jpg" alt="53座大巴">
                        <span class="info">53座大巴</span>
                        <div class="mask"></div>
                    </li>
                </ul>
            </div>
        </div>
	
	
	<div class="con_evaluate">
		<div class="con_evaluate_title">
			<p class="font_large_size">用户说</p>
			<p class="font_normal_size">他们和你一样热爱远行</p>
		</div>
		<div class="con_evaluate_visible">
		<div class="con_evaluate_product ">
			<div class="con_evaluate_product_col font_normal_size">
				<div class="con_evaluate_product_head">
					<img src="${ctxStatic}/xiake/images/124 (2).png" />
				</div>
				<div class="con_evaluate_product_col_t ">
					<p class="font_normal_size">胜达电器</p>
					<p class="font_small_size">日租包车</p>
				</div>
				<div class="con_evaluate_product_col_c font_small_size">
					<p>上周的一场临时会议，让我们忙得焦头烂额，还好有霞客约车，让我们此行更加便利，提前两天把车定好，下班前车辆信息，司机信息就都发到手机上了，一目了然。</p>
					<p>出发前一早车就停在了公司楼下，大巴外观很新，车内也很整洁，司机师傅谈吐举止很有礼貌，服务态度很好，对路线也熟悉，就是回程的时候出了些小意外，因为会议内容比较多，出来的时候比先前跟师傅约定的时间晚了一个多小时，不过师傅人很好什么也没说，在这里再次感谢一下王师傅。我想我还会继续选择你们，也希望平台能够延续更好的服务。</p>
				</div>

			</div>
			<div class="con_evaluate_product_col font_normal_size">
				<div class="con_evaluate_product_head">
					<img src="${ctxStatic}/xiake/images/124 (3).png" />
				</div>
				<div class="con_evaluate_product_col_t ">
					<p class="font_normal_size">计调小鹿</p>
					<p class="font_small_size">旅游包车</p>
				</div>
				<div class="con_evaluate_product_col_c font_small_size">
					<p>本社现主营迪士尼专线产品，这次已经是第三次在平台上订车了，因为产品比较特殊，提前一天才能根据具体人数去订车，所以有时会碰到旺季订不到车的情况，虽然可以去其他公司调车，但是价钱往往比较高，但是这几次在线上订车，每次都能有车能派给我，价格与原来定的比较起来还是有优惠的，比我们原来电话联系方便很多，如果能评价，那我每次都给五颗星！</p>
				</div>

			</div>
			<div class="con_evaluate_product_col font_normal_size">
				<div class="con_evaluate_product_head">
					<img src="${ctxStatic}/xiake/images/124 (1).png" />
				</div>
				<div class="con_evaluate_product_col_t ">
					<p class="font_normal_size">爱旅行papi</p>
					<p class="font_small_size">旅行车票</p>
				</div>
				<div class="con_evaluate_product_col_c font_small_size">
					<p>黄山是我一直想去的地方，但是常州到黄山的火车车次又少，开的又慢，上车时间还特尴尬，要么深夜走，要么凌晨才能到，再加上我原来有过好多次跟团被坑的经历，所以也不想跟团去玩，好在打算一起去的闺蜜看到过你们的约车平台，居然还有这种只卖车票的跟团游存在，unbelievable!还能看到旅行社的行程，果断自己规划好买之。</p>
					<p>导游没有因为我们是只买车票的就区别对待，一样讲解的很棒，黄山的日出真的超赞！要去的朋友们一定要看！闺蜜跟我都表示，自由行的话，只要留意你们网上的车票就行了，真是太方便了！</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		</div>
	</div>
	<div class="con_join">
		<img src="${ctxStatic}/xiake/images/霞客约车.png" />
	</div>
	</div>
</body>
</html>